<template>
  <view class="viewport" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <view class="navigate-bar">
      <navigator open-type="navigateBack" hover-class="none" class="back icon-left"></navigator>
      <view class="title">个人信息</view>
    </view>
    <view class="avatar-box" @tap="onAvatarTap">
      <image class="avatar" mode="aspectFit" :src="profile?.avatar"></image>
      <text class="update">点击修改头像</text>
    </view>
    <view class="info">
      <form class="form">
        <view class="item">
          <view class="label">账号</view>
          <view class="value">{{ profile?.account }}</view>
        </view>
        <view class="item">
          <view class="label">昵称</view>
          <input
            class="input value"
            type="text"
            placeholder="请填写昵称"
            v-model="profile.nickname"
          />
        </view>
        <view class="item">
          <view class="label">性别</view>
          <radio-group class="value" @change="onGenderChange">
            <label>
              <radio value="男" color="#27ba9b" :checked="profile?.gender === '男'" />
              男
            </label>
            <label>
              <radio value="女" color="#27ba9b" :checked="profile?.gender === '女'" />
              女
            </label>
          </radio-group>
        </view>
        <view class="item">
          <view class="label">出生日期</view>
          <picker
            @change="onBirthdayChange"
            class="value picker"
            mode="date"
            start="1900-01-01"
            :end="new Date()"
            :value="profile?.birthday"
          >
            <view v-if="profile?.birthday">{{ profile?.birthday }}</view>
            <view v-else class="placeholder">请选择出生日期</view>
          </picker>
        </view>
        <view class="item value">
          <view class="label">城市</view>
          <picker
            @change="onLocationChange"
            class="value"
            mode="region"
            :value="['广东省', '广州市', '海珠区']"
          >
            <view v-if="profile?.fullLocation">{{ profile?.fullLocation }}</view>
            <view v-else class="placeholder">请选择城市 </view>
          </picker>
        </view>
        <view class="item value">
          <view class="label">职业</view>
          <input class="input" type="text" placeholder="请选择职业" v-model="profile.profession" />
        </view>
        <button @tap="onSubmit">保存</button>
      </form>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import Api from '@/services'
import type { TPersonProfile } from '@/types/login'
import { useMemberStore } from '@/stores'

const profile = ref<TPersonProfile>({} as TPersonProfile)
const memberStore = useMemberStore()
let fullLocationCode: [string, string, string] = ['', '', '']
const { safeAreaInsets } = uni.getSystemInfoSync()
const getPersonProfile = async () => {
  const res = await Api.LoginAPI.getPersonProfile()
  profile.value = res.result
  console.log(profile.value, '123')
}
onLoad(async () => {
  getPersonProfile()
})

const onGenderChange: UniHelper.RadioGroupOnChange = (ev) => {
  profile.value.gender = ev.detail.value
}

const onBirthdayChange: UniHelper.DatePickerOnChange = (ev) => {
  console.log(ev, 'ev')
  profile.value.birthday = ev.detail.value
}

const onLocationChange: UniHelper.RegionPickerOnChange = (ev) => {
  profile.value.fullLocation = ev.detail.value.join(' ')
  fullLocationCode = ev.detail.code!
}

const onAvatarTap = () => {
  uni.chooseImage({
    count: 1,
    mediaType: ['image'],
    success: async (res) => {
      const tempFilePath = res.tempFilePaths[0]
      uni.uploadFile({
        url: '/member/profile/avatar',
        name: 'file',
        filePath: tempFilePath,
        success: (resUpload) => {
          // console.log(resUpload)
          if (resUpload.statusCode === 200) {
            const { avatar } = JSON.parse(resUpload.data).result
            profile.value.avatar = avatar
            memberStore.profile!.avatar = avatar
            uni.showToast({
              title: '头像更新成功',
              icon: 'success',
            })
          }
        },
      })

      // if (resUpdate.code === '1') {
      //   memberStore.profile!.avatar = profile.value.avatar
      //   uni.showToast({
      //     title: '头像更新成功',
      //     icon: 'success',
      //   })
      // }
    },
  })
}

const onSubmit = async () => {
  const { nickname, gender, birthday, profession, fullLocation } = profile.value
  console.log(gender, 'gender')

  const res = await Api.LoginAPI.updatePersonProfile({
    nickname,
    gender,
    birthday,
    profession,
    provinceCode: fullLocationCode[0],
    cityCode: fullLocationCode[1],
    countyCode: fullLocationCode[2],
  })
  if (res.code === '1' && nickname) {
    memberStore.profile!.nickname = nickname
    console.log(memberStore.profile, 'memberStore22  ')
  }
  console.log(profile.value, 'profile.value--afrer ')
  uni.showToast({
    icon: 'success',
    title: '更新成功',
  })
  setTimeout(() => {
    uni.navigateBack()
  }, 500)
}
</script>

<style lang="scss" scoped>
.viewport {
  height: 100vh;
  padding: 0 30rpx;
  background-color: #f4f4f4;
  background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png);
  background-size: 100% 420rpx;
  background-repeat: no-repeat;
  .navigate-bar {
    position: relative;
    font-size: 30rxp;
    line-height: 80rpx;
    color: #fff;
    .title {
      width: 100%;
      text-align: center;
    }
    .back {
      position: absolute;
      left: 0;
    }
  }
  .avatar-box {
    padding: 30rpx 0 10rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 26rpx;
    .avatar {
      width: 150rpx;
      height: 150rpx;
      background-color: #fff;
      border-color: 1px solid #fff;
      margin-bottom: 20rpx;
      border-radius: 50%;
    }
  }
  .info {
    margin-top: 40rpx;
    .form {
      display: block;
      box-sizing: border-box;
      height: 100%;
      width: 100%;

      .item {
        display: flex;
        align-items: center;
        height: 80rpx;
        padding: 0 20rpx;
        line-height: 80rpx;
        font-size: 28rpx;
        background-color: #fff;
        border-bottom: 1px solid #eee;

        &:nth-last-child(1) {
          border-bottom: none;
        }
        .label {
          width: 30%;
        }
        .value {
          width: 70%;

          .placeholder {
            color: #999;
          }
        }
      }
      button {
        padding: 0;
        margin: 0;
        background-color: #27ba9b;
        line-height: 3;
        font-size: 26rpx;
        color: #fff;
        border-radius: 50rpx;
        margin-top: 20rpx;
      }
    }
  }
}
</style>
